<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子元素</title>
    <style type="text/css">
    /*为div 里面的span 设置颜色为绿色*/
    /*    这里用后代元素选择器*/
    /*        选中指定元素指定的后代元素*/
    /*    语法：*/
    /*        祖先元素 后代元素{}*/
    #qq span{
        background: #0097e1;
    }

    /*为div的子元素span设置一个背景颜色为黄色*/
    /*    子元素选择器、*/
    /*        作用：*/
    /*            选中父元素的指定子元素*/
    /*        语法：*/
    /*            父元素 > 子元素*/
    div > span {
        background: yellow;
    }

        /*兄弟标签的选择是：选中的一个元素后面紧挨着的那个兄弟元素   用 +*/
        /*还有就是后面的所有的元素用 ~*/


    </style>
</head>
<body>
<div id="qq">
    <span>这是一个span</span>
    <p><span>这是在a里面的span</span></p>
</div>
<div>
    <span>这是一个span</span>
    <p><span>这是在a里面的span</span></p>
</div>

</body>
</html>